<template>
    <div id='addBreak'>
      <div class="title">{{title}}</div>
      <div class="content">
        <div class="add-title">Add Break</div>
        <div class="add-content">
          <Form class="my-form add-form" v-model="addBreakForm" :label-width="100" label-position="left">
            <Form-item label="Name">
            <Row>
              <i-col span="3">
                  <Input v-model="addBreakForm.breakName"></Input>
              </i-col>
            </Row>
            </Form-item>
            <Form-item label="Length">
              <Row>
                <i-col span="3">
                  <Form-item>
                    <Input v-model="addBreakForm.breakLength"></Input>
                  </Form-item>
                </i-col>
                <i-col span="3" style="padding-left: 12px">
                  <Form-item>
                    <Select v-model="addBreakForm.breakUnit">
                      <Option v-for="(item,key) in breakUnit" :key="item.value" :value="item.value"> {{item.label}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="5" style="padding-left: 12px">
                  <Form-item>
                    <Checkbox v-model="notSetLength">No set length </Checkbox>
                  </Form-item>
                </i-col>
              </Row>
            </Form-item>
            <Form-item label="Type">
              <Row>
                <i-col span="3">
                  <Select v-model="addBreakForm.breakType">
                    <Option v-for="(item,key) in breakType" :key="item.value" :value="item.value"> {{item.label}}</Option>
                  </Select>
                </i-col>
              </Row>
            </Form-item>
            <Form-item label="Employees">
              <div class="employee-list-text">
                {{employees}}
                <span class="add-employee" @click="getBreakEmployeeList">
                  <img :src="addEmployeeIcon">
                </span>
              </div>
            </Form-item>

           <div class="collapse">
              <div class="collapse-title"><Checkbox style="width: 100%"  v-model="isAutomatic">AUTOMATIC BREAK</Checkbox></div>
              <div class="collapse-content" v-show="isAutomatic">
                <div class="content-item-title">WHEN</div>
                <div class="content-item-content">
                  <Form-item label="SHIFT HAS REACHED" :label-width="200">
                    <Row>
                      <i-col span="3">
                        <Form-item>
                          <Input v-model="addBreakForm.automaticWhenLength"></Input>
                        </Form-item>
                      </i-col>
                      <i-col span="4" style="padding-left: 12px">
                        <Form-item>
                          <Select v-model="addBreakForm.automaticWhenUnit">
                            <Option v-for="(item,key) in breakUnit" :key="item.value" :value="item.value"> {{item.label}}</Option>
                          </Select>
                        </Form-item>
                      </i-col>
                      <i-col span="8" style="padding-left: 12px">
                        <Form-item>
                          <Checkbox v-model="automaticIsRepeat">{{automaticIsRepeatText}}</Checkbox>
                        </Form-item>
                      </i-col>
                    </Row>
                  </Form-item>
                  <Form-item label="DAYS OF THE WEEK" :label-width="200">
                    <div class="week-select">
                      <span span="1" class="week-item" :class="{active:weekValue.indexOf(item.value)>-1}" v-for="(item,key) in week" :key="item.value" @click="clickWeekItem(item.value)">
                        {{item.label}}
                      </span>
                    </div>
                  </Form-item>
                </div>
                <div class="content-item-title">INSERT BREAK</div>
                <div class="content-item-content">
                  <Form-item label="SHIFT HAS REACHED" :label-width="200">
                    <Row>
                      <i-col span="5">
                        <Form-item>
                          <Select v-model="addBreakForm.automaticPlaceBreakAt">
                            <Option v-for="(item,key) in breakAt" :key="item.value" :value="item.value"> {{item.label}}</Option>
                          </Select>
                        </Form-item>
                      </i-col>
                      <i-col span="3" style="padding-left: 12px" v-if="addBreakForm.automaticPlaceBreakAt == 4">
                        <Form-item>
                         <Input v-model="addBreakForm.automaticWhenPlaceTime" placeholder="hh:ss">
                        </Form-item>
                      </i-col>
                    </Row>
                  </Form-item>
                </div>
              </div>
            </div>

            <div class="collapse">
              <div class="collapse-title"><Checkbox style="width: 100%" v-model="isManualBreak">MANUAL BREAK - EMPLOYEE CAN START/STOP A BREAK</Checkbox></div>
              <div class="collapse-content" v-show="isManualBreak">
                <div style="line-height: 40px"><Checkbox v-model="manualIsAutoEnd">Automatically end break when duration ends  </Checkbox></div>
                <div style="line-height: 40px"><Checkbox v-model="manualIsEndEarly">Employee can't end break early (15min required)  </Checkbox></div>
                <div style="line-height: 40px">
                  <Checkbox v-model="manualIsEndNotify">Notify TSheets app users </Checkbox>
                  <Input v-model="addBreakForm.manualNotifyMin" style="width: 100px;margin-right: 8px"></Input>minutes before break ends
                </div>
              </div>
            </div>
          </Form>
        </div>
        <div class="btn-group">
          <button class="default-btn" @click="cancelAddBreak">Cancel</button>
          <button class="default-btn active" @click="addBreak">Save</button>
        </div>
      </div>
      <employee-select @done="doneAddBreakEmployee" @close="showEmployeeList = false" :selection="addBreakForm.employeeIdList" :show="showEmployeeList" :list="breakEmployeeList"></employee-select>
    </div>
</template>

<script>
  import employeeSelect from 'src/pages/org/employee/employeeListSelect.vue'
  import addEmployeeIcon from 'src/assets/images/addEmployee.png'
	export default {
		name: 'id',
		components: {
      employeeSelect
    },
    computed:{
      automaticIsRepeatText(){
      	var length = this.addBreakForm.automaticWhenLength||"";
      	var unit = this.addBreakForm.automaticWhenUnit == 0? 'mins':'hrs';
      	return 'Repeat every ' + length + " " + unit;
      },
      employees(){
      	if(this.addBreakForm.isAllEmployee == 0){
          return 'All employees';
        }else{
      		return this.addBreakForm.employeeIdList.length + ' employees';
        }
      },
      breakEmployeeList(){
        return this.$store.getters.breakEmployeeList;
      }
    },
    watch:{
      isAutomatic(value){
      	this.addBreakForm.isAutomatic = value?1:0;
      },
      isManualBreak(value){
        this.addBreakForm.isManualBreak = value?1:0;
      },
      manualIsAutoEnd(value){
        this.addBreakForm.manualIsAutoEnd = value?1:0;
      },
      manualIsEndEarly(value){
        this.addBreakForm.manualIsEndEarly = value?1:0;
      },
      manualIsEndNotify(value){
        this.addBreakForm.manualIsEndNotify = value?1:0;
      },
      automaticIsRepeat(value){
        this.addBreakForm.automaticIsRepeat = value?1:0;
      },
      weekValue(value){
      	if(value.length){
          this.addBreakForm.automaticWhenWeek = value.join();
        }
      }
    },
		data () {
			return {
				title: '',
        addEmployeeIcon,
        showEmployeeList:false,
        breakUnit:[
          {value:1,label:'minutes'},
          {value:2,label:'hours'}
        ],
        breakType:[
          {value:1,label:'Paid '},
          {value:2,label:'Unpaid'}
        ],
        breakAt:[
          {value:1,label:'Start of Shift'},
          {value:2,label:'Middle of Shift'},
          {value:3,label:'End of Shift '},
          {value:4,label:'Specific of Shift'}
        ],
        weekValue:[1,2,3,4,5],
        week:[
          {value:0,label:'Sun'},
          {value:1,label:'Mon'},
          {value:2,label:'Tue'},
          {value:3,label:'Wed'},
          {value:4,label:'Thu'},
          {value:5,label:'Fri'},
          {value:6,label:'Sat'}
        ],
        notSetLength:false,
        automaticIsRepeat:false,
        isAutomatic:false,
        isManualBreak:false,
        manualIsAutoEnd:false,
        manualIsEndEarly:false,
        manualIsEndNotify:false,
        addBreakForm:{
					breakName:null,
          breakUnit:1,
          breakLength:15,
          breakType:0,
          isAutomatic:0,
          automaticWhenLength:4,
          automaticWhenUnit:2,
          automaticIsRepeat:0,
          automaticWhenWeek:"1,2,3,4,5", //0,1,2,3,4,5
          isManualBreak:0,
          automaticPlaceBreakAt:2,
          automaticWhenPlaceTime:null, //HH:SS
          manualIsAutoEnd:0,
          manualIsEndEarly:0,
          manualIsEndNotify:0,
          manualNotifyMin:5,
          isAllEmployee:0,
          employeeIdList:[],
        }
			}
		},
    methods:{
      clickWeekItem(value){
      	var index = this.weekValue.indexOf(value);
      	if(index>-1){
          this.weekValue.splice(index,1);
        }else{
          this.weekValue.push(value);
        }
      },
      cancelAddBreak(){
        this.$router.back();
      },
      addBreak(){
      	if(this.addBreakForm.isAutomatic == 0 && this.addBreakForm.IsManualBreak == 0){
      		this.$Message.error('please select one isAutomatic and IsManualBreak',2000);
      		return;
        }
        this.$store.dispatch('saveBreak',this.addBreakForm).then(
          ()=>{
          	this.$Message.success('add Break Success');
            this.$router.back();
          }
        );
      },
      getBreakEmployeeList(){
      	this.$store.dispatch('getBreakEmployeeList',{breakId:null}).then(
          ()=>{this.showEmployeeList = true}
        )
      },
      doneAddBreakEmployee(ids){
        this.addBreakForm.isAllEmployee = 1;
        this.addBreakForm.employeeIdList = ids;
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" >
    @import "src/assets/css/variable.scss";

    #addBreak {
      >.content{
        .add-title{
          font-size: 20px;
          color: #325570;
          padding: 6px 30px;
          margin-bottom: 15px;
        }
        .add-content{
          padding: 10px 40px;
          font-size: 14px;
          color: #335570;
          .add-form{
            .collapse{
              margin: 14px auto;
              .collapse-title{
                width: 800px;
                height: 30px;
                line-height: 30px;
                background: #F2F9FF;
                padding-left: 10px;
                font-size: 14px;
                color: #335570;
              }
              .collapse-content{
                width: 800px;
                background: #FFFFF0;
                padding: 14px;
                .content-item-title{
                  line-height: 50px;
                  color: $baseColor;
                }
              }
            }
          }
        }
        .btn-group{
          margin: 20px auto;
          text-align: center;
          button{
            margin: 0 20px;
          }
        }
      }
      .employee-list-text{
        color: $baseColor;
        .add-employee{
          font-size: 30px;
          vertical-align: middle;
          margin-left: 20px;
          cursor: pointer;
          &:hover{
            opacity: .7;
          }
        }
      }
      .week-select{
        .week-item{
          display: inline-block;
          width: 60px;
          border:1px $baseBorderColor solid;
          border-right:0 ;
          text-align: center;
          background-color: #fff;
          cursor: pointer;
          &.active{
            background-color: $baseColor;
            color: #fff;
          }
          &:last-child{
            border-right: 1px $baseBorderColor solid;
          }
          &:hover{
            opacity: .7;
          }
        }
      }
    }
</style>
